// 成绩控制台
const scoreUl = document.querySelector('#batch');
// console.log(scoreUl);
// 成绩列表
const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
// console.log(toggleBatchBtn);
// 1、获取班级概况
async function getStudentOverview() {
    const result = await axios({ url: "/student/overview" });
    const { avgAge, avgSalary, proportion, total } = result.data.data;

    document.querySelector(".avgAge").innerText = avgAge;
    document.querySelector(".avgSalary").innerText = avgSalary;
    document.querySelector(".proportion").innerText = proportion;
    document.querySelector(".total").innerText = total;
}

getStudentOverview();

// 2、获得全部学生信息
async function resultStudent() {
    const result = await axios({
        url: "/student/list"
    })
    console.log(result);
    // 学生薪资
    getScoreByBatch(result.data.data)
    // 饼状图
    StudentPie(result.data.data)
}
resultStudent()
StudentAchievement()
// 3、薪资曲线图
function getScoreByBatch(StudentList) {
    // console.log(StudentList);
    // 名字
    const nameList = StudentList.map((item) => item.name)
    // 期待薪资
    const salaryList = StudentList.map((item) => item.salary)
    // 真实薪资
    const truesalary = StudentList.map((item) => item.truesalary)
    const myChart = echarts.init(document.querySelector(".line"));
    const option = {
        color: ["red", "blue"], //线条颜色
        dataZoom: [
            {
                // 滑块开始的位置
                start: 0,
                // 滑块结束位置
                end: 30,
            },
        ], //底部滑块
        title: {
            text: "薪资Salary",
        },
        tooltip: {
            trigger: "axis",
        },
        // 薪资标题
        legend: {},
        xAxis: {
            type: "category",
            boundaryGap: false,
            // 名字
            data: nameList,
        },
        yAxis: {},
        series: [
            {
                // 设置图例 实心圆
                symbol: "circle",
                name: "期待薪资",
                type: "line",
                // 平滑
                smooth: true,
                data: salaryList,
            },
            {
                // 设置图例 实心圆
                symbol: "circle",
                name: "实际薪资",
                type: "line",
                // 平滑
                smooth: true,
                data: truesalary,

                markLine: {
                    data: [
                        [
                            {
                                symbol: "none",
                                x: "90%",

                            },
                            {
                                symbol: "circle",
                                label: {
                                    position: "start",
                                    formatter: "Max",
                                },
                                type: "max",
                                name: "最高点",
                            },
                        ],
                    ],
                },
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}
// 3.1 点击显示学生更多成绩
toggleBatchBtn.addEventListener('click', function (e) {
    console.log(1);
    scoreUl.classList.toggle("batch_show");
})
// 3.2 点击成绩 切换显示 柱状图
scoreUl.addEventListener("click", function (e) {
    if (e.target.nodeName === "A") {
        const batch = e.target.dataset.index;
        console.log(batch);
        StudentAchievement(batch);
    }
});

// 4、学生成绩柱状图
async function StudentAchievement(batch = 1) {
    const result = await axios({
        url: "/score/batch",
        params: { batch }
    })
    console.log(result);
    const { avgScore, group, lt60, gt60, gt80 } = result.data.data;
    // group   组名
    // avgScore  平均分
    // lt60 小于60分人数
    // gt60 60~80分之间的人数
    // gt80 80以上的人数
    // barChart
    // 融合图表代码
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(".barChart"));
    const option = {
        grid: {
            // top 设置 图表距离 顶部距离
            // bottom 设置 图表距离 底部距离
            top: 30,
            bottom: 20,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "#999",
                },
            },
        },

        legend: {
            data: ["平均分", "低于60分人数", "60到80分之间", "高于80分人数"],
        },
        xAxis: [
            {
                type: "category",
                data: group,//组名
                axisPointer: {
                    type: "shadow",
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                max: 100,//具体看业务要求
                axisLabel: {
                    formatter: "{value} 分",
                },
            },
            {
                type: "value",
                // 注释掉让自己计算
                // min: 0,
                // max: 25,
                // interval: 5,
                axisLabel: {
                    formatter: "{value} 人",
                },
            },
        ],
        series: [
            {
                name: "平均分",
                type: "bar",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + " ml";
                    },
                },
                data: avgScore


            },
            {
                name: "低于60分人数",
                type: "bar",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + " ml";
                    },
                },
                yAxisIndex: 1,// 对齐右侧y坐标
                data: lt60
            },
            {
                name: "60到80分之间",
                type: "bar",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + " ml";
                    },
                },
                yAxisIndex: 1,// 对齐右侧y坐标
                data: gt60

            },
            {
                name: "高于80分人数",
                type: "bar",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + " ml";
                    },
                },
                yAxisIndex: 1, // 对齐右侧y坐标
                data: gt80
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 5、 籍贯可视化饼图
function StudentPie(list) {
    console.log(list);
    debugger
    // 籍贯信息
    const newList = [];
    // 对旧数组做遍历
    for (let index = 0; index < list.length; index++) {
        const ele = list[index];
        const i = newList.findIndex((item) => item.name === ele.province);
        if (i === -1) {
            newList.push({ value: 1, name: ele.province });
        } else {
            newList[i].value++;
        }
    }
    // 图饼
    const myChart = echarts.init(document.querySelector(".pie"));

    // 指定图表的配置项和数据
    const option = {
        // 标题
        title: {
            text: "籍贯Hometown",
        },
        series: [
            {
                name: "Nightingale Chart",
                type: "pie",
                // 第一个是内圈，第二个是外圈
                radius: [50, 250],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                    borderRadius: 8,
                },
                data: newList
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

